<template>
  <div class="app-container">
    <el-row :gutter="10" style="margin-bottom:20px;">
      <el-col :span="1.5">
        <el-button style=" background: #00BFD6; color: #FFFFFF; " @click="addShow">增加 <i class="el-icon-plus"></i></el-button>
      </el-col>
      <!-- <el-col :span="1">
        <el-button style="margin-left:24px;" @click="reset">重置</el-button>
      </el-col>-->
    </el-row>
    <el-table
      :data="tableData"
      border
      v-loading="listLoading"
      element-loading-text="Loading"
      fit
      highlight-current-row
      style="width:100%;"
    >
      <el-table-column type="index" label="序号" width="60"></el-table-column>
      <el-table-column prop="name" label="名称" min-width="120px"></el-table-column>
      <el-table-column prop="description" label="描述" min-width="500px"></el-table-column>
      <el-table-column label="禁用" width="110">
        <template slot-scope="scope" v-if="scope.row.role_id !== 1 && scope.row.role_id !== 2">
          <el-switch
            v-model="scope.row.status"
            active-color="#00BFD6"
            inactive-color="#eaecf0"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(scope.row.id,scope.row.status)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            style="background-color:#00BFD6; color:#fff; border-radius: 6px;"
            size="small"
            @click="editShow(scope.row)"
          >编辑</el-button>
          <el-button
            style="background-color:#ff9f6f; color:#fff; border-radius: 6px;"
            size="small"
            @click="handleEdit(scope.row.role_id)"
          >权限</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:40px 0">
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="searchValue.page"
        :limit.sync="searchValue.limit"
        @pagination="fetchData"
      />
    </div>
    <edit-role ref="myDetail" :dialogShow.sync="dialogShow" :data="editData" @onUpdate="fetchData"></edit-role>
    <el-dialog :visible.sync="roleShow" title="权限设置" class="role-box"   :close-on-click-modal="false" >
      <el-form :model="roleForm" label-width="80px" label-position="left">
        <el-tree
          :data="roleData"
          :props="defaultProps"
          :checked-keys="menuIds"
          node-key="menu_id"
          show-checkbox
          default-expand-all
          ref="tree"
          :check-strictly="false"
        ></el-tree>
      </el-form>
      <div style="text-align:right; margin-top:40px">
        <el-button @click="roleShow = false">取消</el-button>
        <el-button style="background-color:#00BFD6; color:#fff;" @click="confirmRole">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EditRole from "../components/edit-role";
import {
  getRoleAuth,
  getRoleList,
  roleAuthEdit,
  roleEdit,
  roleAdd
} from "@/api/role";
export default {
  components: { EditRole },
  data() {
    return {
      role_id: "", //角色ID
      menuIds: [], //保存选中的权限数组

      roleShow: false,
      dialogShow: false, //新增面板 显示状态
      editData: {}, //编辑id
      searchValue: {
        page: 1,
        pageSize: 10,
      
      },
        total: 0,
      listLoading: false,
      tableData: [],
      roleData: [],
      roleForm: {},
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "children"
      }
    };
  },
  created() {
    this.fetchData();
  },

  methods: {
    // 账号禁用
    changeStatus(id, status) {
      let params = {};
      params.account_id = id;
      params.status = status;
    },
    confirmRole() {
      this.menuIds = [
        ...this.$refs.tree.getCheckedKeys() //选中的key
        // ...this.$refs.tree.getHalfCheckedKeys(), //半选的key
      ];
      //
      let params = {};
      params.role_id = this.role_id;
      params.menuIds = [...this.menuIds];
      roleAuthEdit(params).then(res => {
        if (res.code === 0) {
          this.$message.success("操作成功");
          this.roleShow = false;
          this.role_id = "";
          this.menuIds = [];
          this.selectIds = [];
          this.fetchData();
        } else {
          this.roleShow = false;
          console.log("操作失败");
        }
      });
    },

    // 权限设置弹窗
    handleEdit(id) {
      this.roleShow = true;
      this.role_id = id;
      let params = {};
      params.role_id = id;
      getRoleAuth(params).then(res => {
        this.roleData = res.list;
        this.selectIds = [...new Set(res.selectIds)];
        this.$nextTick(() => {
          // 确保DOM更新后再设置选中状态
          this.$refs.tree.setCheckedKeys(this.selectIds);
        });
      });
    },
    //  新增面板点击事件
    addShow() {
      this.editData = {};
      this.dialogShow = true;
    },
    editShow(item) {
      // console.log(item);
      this.dialogShow = true;
      this.editData = { ...item };
    },
    handleSizeChange(val) {
      this.searchValue.pageSize = val;
      this.fetchData();
    },
    fetchData() {
      this.listLoading = true;
      let params = Object.assign({}, this.searchValue);
      getRoleList(params).then(res => {
        this.tableData = res.list;
        this.total = res.total;
        this.listLoading = false;
      });
    }
  }
};
</script>
<style scoped>
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #00bfd6 !important;
}
.role-box ::v-deep .el-dialog {
  width: 520px;
  border-radius: 14px;
}
</style>